import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import { Button, Flex, Grid } from 'antd-mobile';

class App extends React.Component { 
	constructor(props) {
		super(props);
		this.state = {
			data: [],
			UseData: [],
			InvalidData: [],
		}
	}

	componentDidMount(){
		// 我的服务列表
		this.requestListData();
    }
   
	handleChick = (el) => {
		if(el.orderStatus !== 'VALID')return;
		actions.routing.push({
			pathname: "service-details",
			search: `?serviceCode=${el.code}&orderNo=${el.orderNo}`
		})
	}

	requestListData = () => {
		T.fetch({
            url:'/facilitator/service/custServiceList.json',
            loading:true
        }).then((res)=>{
            if(res.success){
				let data = res.value || [];
				let UseData = [];
				let	InvalidData = [];
				data.forEach((item, index)=>{
					if(item.orderStatus == 'VALID'){
						UseData.push(item);
					}else{
						InvalidData.push(item);
					}
				})
				this.setState({data, UseData, InvalidData})
            }
        })
	}

	render() {
		const {data, UseData, InvalidData} = this.state;
		const Lang = window.LangMessage ||{};
		return (
            <div className="service-list">
                <h1 className="tac f44 lh15">{Lang.my_service || '我的服务'}</h1>
				<div className="f44">Effective</div>
				<Grid
					data={UseData} 
					columnNum={3}
					onClick={this.handleChick}
					renderItem={dataItem => (
						<div style={{padding:"10px 0"}}>
							<img src={dataItem.mainPic} style={{ width: '75px', height: '75px' }} alt="" />
							<div style={{fontSize: '14px', marginTop: '12px' }}>
								<span>{dataItem.title}</span>
							</div>
						</div>
					)}
				/>
				<div className="f44 mt40">Ineffective</div>
				<Grid
					data={InvalidData} 
					columnNum={3}
					onClick={this.handleChick}
					renderItem={dataItem => (
						<div style={{padding:"10px 0", height:'100%',background: '#ddd'}}>
							<img src={dataItem.mainPic} style={{ width: '75px', height: '75px' }} alt="" />
							<div style={{fontSize: '14px', marginTop: '12px' }}>
								<span>{dataItem.title}</span>
							</div>
						</div>
					)}
				/>
            </div>
        )
	}
}

export default App;